<template>
    <div class="authority-list-item" :id="'treeLevel_' + model.id +'_'+ index" :class="['list-item_'+ model.level + '_' + index]" v-show="authorShow || model.checkEnabled">
        <div class="ahthority-label" :class="['tree_' + model.level]" :id="'treeLevel_' + model.id">
             <template v-if="!noticeNav(model)">
                <el-checkbox v-model="model.checked" :disabled="model.disabled"  :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
            </template>

            <template v-else>
                <el-checkbox v-model="model.checked" :disabled="noticeChecked" :value="model.id">{{model.menuName}}</el-checkbox>
            </template>            
        </div>
        <div class="child" :id="'tree_' + model.id" v-show="isShowMenu(model.id)" :class="{'has-child': model.children.length,'default-style': model.children.length==0}">
            <tree-author v-for="(item,index) in model.children" 
                :key="index"
                :model="item"
                :index="index"
                >
            </tree-author>
        </div>
    </div>
</template>
<script>
export default {
    name: 'treeAuthor',
    props: {
        model: {
            type: Object,
            default() {
                return {}
            }
        },
        // 传递过来的值
        index: {
            type: Number,
            default: 0
        } 
    },
    computed: {
        authorShow() {
            return this.$route.name == '查看权限' ? true : false;
        }
    },
    data() {
        return {
            checked: false,
            flag: false,
            flag1: false,
            noticeChecked: true,
            childChecked: false, // 子集选中的状态
            intNoticeList: ['3001', '3002', '3003', '3004', '3005', '3006'],
            hideMenuData: ['3002', '3007', '3017', '3023', '3028', '3031', '3034', '3040', '3062', '3065', '3070', '3075']
        }
    },
    methods: {
        noticeNav(model) {
            // console.log(id);
            // console.log(this.intNoticeList.indexOf(id) > -1);
            return this.intNoticeList.indexOf(model.id) > -1 && (model.checked = true);
        },
        isShowMenu(id) {
            return !(this.hideMenuData.indexOf(id) > -1);
        },
        change(model, e) {
            this.getAllParent(model);
            this.isParentCheck(this.$parent);     
            this.getAllChildren(model);   
            this.childChecked = false;
        },
        // 获取所有父级选中状态
        getAllParent(parent) {
            this.isParentCheck(parent);
        },
        // 判断是否父级选中状态
        isParentCheck(parent) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                var flag = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        flag = true;
                    }
                }
                parent.model.checked = flag;
            }
            if (parent.model) {
                this.$nextTick(() => {
                    var parentChild = parent.model.children;
                    this.flag1 = false;
                    for (var j = 0; j < parentChild.length; j++) {
                        var curP = parentChild[j];
                        if (curP.checked) {
                            this.flag1 = true;
                        }
                    }
                    parent.model.checked = this.flag1;
                })
            }
            // this.getChildCheck(parent);
            if (parent.$parent) {
                this.isParentCheck(parent.$parent);
            }
        },
        // 获取所有子集的状态
        getChildCheck(model) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                this.flag = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        this.flag = true;
                    }
                }
                parent.model.checked = this.flag;
            }
            if (parent.model) {
                parent.model.checked = this.flag;
            }

        },
        // 获取子集的状态
        getChild(model) {
            if (model.children) {   
                model.children.forEach(item => {
                    if (!item.checked&&item.checkEnabled) {
                        this.childChecked = true;
                    }
                    if (item.children.length > 0) {
                        this.getChild(item);
                    }
                });
            }
            if (this.childChecked == true) {
                model.checked = this.childChecked;
            }    
            this.deleteChecked(model, this.childChecked)
        },
        // 获取所有子集
        getAllChildren(model) {
            this.getChild(model)
        },
        // 删除子级状态
        deleteChecked(model) {
            if (model.children) {
                model.children.forEach(item => {
                    item.checked = item.checkEnabled && model.checked;
                    if (item.children) {
                        this.deleteChecked(item);
                    }
                });
            }
            this.getChildCheck(this.$parent);
        }
    }
}
</script>
<style lang="scss">
// border-color
  $border-color: #ebebeb;
  .authority-list-wrapper {
    min-width: 880px;
    // width: 100%;
    margin-left: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    .authority-list-item {
      display: flex;
      margin-bottom: 19px;
      border: 1px solid $border-color;
      .child{  
            width: auto;
            >.authority-list-item {
                border: none;
                margin-bottom: 0;
                >.tree_2::first-of-type {
                    border-top: none;
                }
            }
        }
        .child.has-child {
            border-left: 1px solid $border-color;
        }
        .ahthority-label {
            width: 300px;
            height: 40px;
            padding: 12px 18px;
            border-top: 1px solid  $border-color;
        }
        .ahthority-label.tree_1 {
            border-top: none;

        }
        .border-none {
            border: none;
        }
        .default-style {
            // width: 220px;
            height:40px;
            border-top: 1px solid $border-color;
            // border-left: 1px solid $border-color;
        }
        .tree_1 ~ .default-style {
            border: none;
        }
       .tree_3 ~ .default-style{
            // ------------cm
            width: 300px;
            height: 40px;
            border-top: 1px solid $border-color;
        }
        .list-item_2_0 .tree_2,.list-item_2_0 .tree_3,.list-item_2_0 .default-style{
            border-top: none;
        }   
    }
    .ahthority-label.has-child {
      border-bottom: none;
    }
  }
  #treeLevel_3007{
      border: none;
  }
  #treeLevel_3034_4 .tree_2, #treeLevel_3070 {
      border-top: none;
  }
  
  #treeLevel_3002_0,#treeLevel_3016,#treeLevel_3031_2,#treeLevel_3061_5, #treeLevel_3022_3, #tree_3074 {
      border-bottom: 1px solid #ebebeb;
  }
  #treeLevel_3031_2{
      border-bottom: none;
  }
  #treeLevel_3017,#treeLevel_3023,#treeLevel_3028,#treeLevel_3034,#treeLevel_3040,#treeLevel_3062,#treeLevel_3065, #tree_3001 {
      border-right: 1px solid $border-color;
  }
  #treeLevel_3031_2 {
      border-right: 1px solid $border-color;
  }
  #treeLevel_3070_0 {
      border-top: 1px solid $border-color;
  }
</style>

